<template>
	<view class="waik">
		<view class="shurul">
			<view class="wenzi">合同名称</view>
			<input class="ddshur" placeholder="填写合同名称" v-model="htname"/>
		</view>
		<view class="shurul">
			<view class="wenzi">签订金额</view>
			<view class="hengxb">
				<input class="shuzhu" type="digit" v-model="htjiner" placeholder="填写金额"/>
				<view>元</view>
			</view>
		</view>
		<view class="shurul">
			<view class="wenzi">签订日期</view>
			<view class="ddshur">
				<picker mode="date" :value="qiandsj" :start="startDate" :end="endDate" @change="getqdshiqi">
					<view>{{qiandsj}}</view>
				</picker>
			</view>
		</view>
		<view class="shurul">
			<view class="wenzi">合同开始时间</view>
			<view class="ddshur">
				<picker mode="date" :value="htkssj"  :start="startDate" :end="endDate" @change="getksriqi">
					<view>{{htkssj}}</view>
				</picker>
			</view>
		</view>
		<view class="shurul">
			<view class="wenzi">合同结束时间</view>
			<view class="ddshur">
				<picker mode="date" :value="htjssj" :start="startDate" :end="endDate" @change="getjiesriqi">
					<view>{{htjssj}}</view>
				</picker>
			</view>
		</view>
		<view class="shurul">
			<view class="wenzi">合同类型</view>
			<view class="hengxb">
				<view :class="htleix==0?'xzlx':'wxlx'" @click="xzkzleix(0)">支付类</view>
				<view :class="htleix==1?'xzlx':'wxlx'" @click="xzkzleix(1)">收款类</view>
			</view>
		</view>
		<view class="shurul">
			<view class="wenzi">上传合同</view>
			<view class="zdhhtp">
				<view class="tupian" v-for="(item,index) in htfuben">
					<image class="shanchu" src="../../static/shanc.png" @click="removeImage(index)"></image>
					<image class="tupian" :src="imgurl+item" mode="aspectFill" @click="handleImagePreview(index)"></image>
				</view>
				<image class="tupian" src="../../static/tupian.png" @click="sctupian"></image>
			</view>
		</view>
		<view class="shurul">
			<view class="wenzi">备注</view>
			<textarea class="beizhu" v-model="shuom" placeholder="填写备注说明"/>
		</view>
		<view class="tjann">保存合同</view>
	</view>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return{
				user:null,
				imgurl:getApp().globalData.imgurl,
				htname:'', //合同名称
				htjiner:'', //合同金额
				qiandsj: currentDate,  //签订日期
				htkssj: '请选择开始日期',  //合同开始时间
				htjssj: '请选择结束日期',  //合同结束时间
				shuom:'',   //备注
				htleix:0,  //收付 0支付，1收款
				htfuben:[] //上传合同	
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onLoad:function(){
			var that = this
			uni.getStorage({
				key: 'user',
				success: function (res) {
					that.user = res.data;
				}
			})
		},
		methods: {
			// 选择签订日期
			getqdshiqi: function(e) {
				this.qiandsj = e.target.value
			},
			// 选择开始日期
			getksriqi: function(e) {
				this.htkssj = e.target.value
			},
			// 选择结束日期
			getjiesriqi: function(e) {
				this.htjssj = e.target.value
			},
			// 选择合同类弄
			xzkzleix(lx){
				this.htleix = lx;
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				console.log(year)
				if (type === 'start') {
					year = year - 2;
				} else if (type === 'end') {
					year = year + 60;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},

			// 获取当前时间
			// getdeys(){
			// 	var date = new Date();
			// 	var nian = date .getFullYear(); //获取完整的年份(4位)
			// 	var yue = date .getMonth(); //获取当前月份(0-11,0代表1月)
			// 	var ri = date .getDate(); //获取当前日(1-31)
			// 	this.zdriqi = nian+'-'+yue+'-'+ri
			// },
			
			// 上传凭证
			sctupian(){
				var that=this;
				if(9>that.htfuben.length){
					uni.chooseImage({
					    count: 1, 
					    sizeType: ['original', 'compressed'], 
					    sourceType: ['camera ','album'], 
					    success: function (res) {
							uni.uploadFile({
								url: getApp().globalData.url +'/api/Upload', 
								method: 'POST', 
								filePath:res.tempFilePaths[0],
								name: 'image',
								success: (e) => {
									var data = JSON.parse(e.data);
									console.log(data);
									if(data.code==200){
										that.htfuben= that.htfuben.concat(data.name)
									}else{
										wx.showToast({
											title:data.msg,
											icon: 'none', 
											duration: 2000     
										}) 
									}
								}
							})	
					    }
					});
				}else{
					uni.showToast({
						title: "最多只能上传9张图片",
						icon: 'none',
						duration:2000,
						mask: true
					})
				}
			},
			// 预览图片
			handleImagePreview(index) {
			    const idx = index;
				const img = this.htfuben;
				var url = getApp().globalData.imgurl;
				var images = [];
				for(let i=0;i<img.length;i++){
					images = images.concat(url+img[i])
				}
			    uni.previewImage({
			      current: images[idx],  //当前预览的图片
			      urls: images,  //所有要预览的图片
			    })
			 },
			 // 删除图片
			removeImage(index) {
				var that = this;
				var image = that.htfuben;
				// 获取要删除的第几张图片的下标
				const idx = index;
				// 删除数据库图片
				image.splice(idx, 1);
				that.htfuben = image;
				console.log('当前上传图片',that.htfuben)
			},
			// 保存合同
			addzhangdan(){
				var that = this; 
				if(that.htname==''){
					wx.showToast({
					    title: '请填写合同名称',
					    icon: 'none', 
					    duration: 2000     
					})  
					return
				};
				if(that.htjiner==''){
					wx.showToast({
					    title: '请填写合同金额',
					    icon: 'none', 
					    duration: 2000     
					})  
					return
				};
				if(that.htkssj=='请选择开始日期'){
					wx.showToast({
					    title: '请选择开始日期',
					    icon: 'none', 
					    duration: 2000     
					})  
					return
				};
				if(that.htjssj=='请选择结束日期'){
					wx.showToast({
					    title: '请选择结束日期',
					    icon: 'none', 
					    duration: 2000     
					})  
					return
				};
				if(that.htfuben.length==0){
					wx.showToast({
					    title: '请拍照上传合同',
					    icon: 'none', 
					    duration: 2000     
					})  
					return
				};
				wx.request({
					url: getApp().globalData.url+'/api/AddHtong',
					method: 'POST', 
					data:{
					  openid:getApp().globalData.openid,
					  htname:that.htname,
					  htjiner:that.htjiner,
					  qiandsj:that.qiandsj,
					  htkssj:that.htkssj,
					  htjssj:that.htjssj,
					  shuom:that.shuom,
					  htfuben:that.htfuben.toString(),
					  htleix:that.htleix,
					  gsid:that.user.gsid
					},
					header: {
						"Content-Type": "application/x-www-form-urlencoded"  // post
					},                      
					success:function(res) {
						if(res.data.code==200){
							uni.$emit('updateData', 1);
							wx.navigateBack({
								delta:1
							})
						}else{
							wx.showToast({
							    title: '添加失败，请重试',
							    icon: 'none', 
							    duration: 2000     
							})  
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.waik{
		width: 710rpx;
		padding: 20rpx;
		.shufxzk{
			display: flex;
			align-items: center;
			justify-content: space-around;
			.yixuan{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 300rpx;
				height: 100rpx;
				background: #008BE7;
				color: #ffffff;
				font-size: 35rpx;
				border-radius: 30rpx;
			}
			.weixuan{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 300rpx;
				height: 100rpx;
				background: #efefef;
				color: #bcbcbc;
				font-size: 35rpx;
				border-radius: 30rpx;
			}
		}
		.tjann{
			width: 650rpx;
			height: 100rpx;
			display: flex;
			margin: 50rpx 30rpx;
			justify-content: center;
			align-items: center;
			background: #008BE7;
			color: #ffffff;
		}
		.shurul{
			margin-top: 30rpx;
			.wenzi{
				font-size: 30rpx;
				margin-bottom: 10rpx;
				color: #808080;
			}
			.zdhhtp{
				margin-top: 10rpx;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				.tupian{
					width: 123rpx;
					height: 123rpx;
					border-radius: 20rpx;
					margin: 10rpx;
					.shanchu{
						width: 30rpx;
						height: 30rpx;
						position: absolute;
						z-index: 111;
						margin-left: 110rpx;
					}
				}
			}
			.beizhu{
				background: #f0f0f0;
				width: 650rpx;
				height: 200rpx;
				padding:30rpx;
				border-radius: 20rpx;
			}
			.pingz{
				width: 150rpx;
				height: 150rpx;
			}
			.hengxb{
				display: flex;
				align-items: center;
				.xzlx{
					width: 200rpx;
					height: 80rpx;
					font-size: 28rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					background: #007AFF;
					color: #ffffff;
					border-radius: 20rpx;
					margin-right: 20rpx;
				}
				.wxlx{
					width: 200rpx;
					height: 80rpx;
					font-size: 28rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					background: #efefef;
					color: #a1a1a1;
					border-radius: 20rpx;
					margin-right: 20rpx;
				}
				.shuzhu{
					width: 600rpx;
					background: #f0f0f0;
					padding:30rpx;
					border-radius: 20rpx;
					margin-right: 20rpx;
				}
			}
			.ddshur{
				background: #f0f0f0;
				padding:30rpx;
				border-radius: 20rpx;
			}
		}
	}
</style>
